<template>
	<view class="container">
		<scroll-view 
			class="scroll-container" 
			scroll-y="true"
		>
			<view class="content-wrapper">
				<!-- 用户信息区域 -->
				<view class="user-header-wrapper">
					<view class="animated-bg"></view>
					<view class="user-header">
						<view class="user-info">
							<image class="avatar" :src="api.BASE_URL + userInfo.avatar" mode="aspectFill"></image>
							<view class="info-right">
								<text class="username">{{ userInfo.username }}</text>
								<!-- <text class="user-id">id：{{ userInfo.user_id }}</text> -->
							</view>
						</view>
						
						<!-- 操作按钮 -->
						<view class="action-buttons">
							<view class="refresh-btn" @tap="refreshData" :class="{ loading: isLoading }">
								<uni-icons color="#fff" type="reload" size="20"></uni-icons>
							</view>
							<view class="edit-btn" @tap="editProfile">
								<text>编辑资料</text>
							</view>
							<view class="settings-btn" @tap="goToSettings">
								<uni-icons color="#fff" type="gear" size="20"></uni-icons>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 帖子分类标签 -->
				<view class="post-tabs">
					<view 
						class="tab-item active"
					>
						<text>帖子</text>
						<text class="count">{{ totalPosts }}</text>
					</view>
				</view>
				
				<!-- 我的帖子列表 -->
				<view class="my-posts">
					<view class="section-title">
						<text>我的帖子</text>
						<text class="count">({{ totalPosts }})</text>
					</view>
					
					<!-- 使用瀑布流组件 -->
					<post-waterfall 
						:posts="posts" 
						v-if="posts.length > 0"
					/>
					
					<!-- 无帖子提示 -->
					<view class="empty-tip" v-else>
						<text>还没有发布过帖子哦~</text>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<!-- 发布按钮 -->
		<view class="publish-btn" @tap="goToPublish">
			<uni-icons type="plus" size="24" color="#fff"></uni-icons>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { api } from '@/utils/request'
import PostWaterfall from '@/components/PostWaterfall.vue'
import Storages from '@/utils/storages'

// 用户信息
const userInfo = ref({})
// 帖子列表
const posts = ref([])
// 统计数据
const totalPosts = ref(0)
// 是否正在加载数据
const isLoading = ref(false)

// 获取用户信息
const getUserInfo = () => {
	const info = uni.getStorageSync(Storages.UserInfo.userInfo)
	if(info) {
		userInfo.value = info
	}
}

// 获取用户帖子
const getUserPosts = async () => {
	
	if(isLoading.value) {
		return
	}
	
	try {
		isLoading.value = true
		const res = await api.request({
			url: '/api/post/get_author_post/',
			method: 'GET',
			data: {
				page: 1,
				page_size: 10
			}
		})
		
		if(res.code === 200) {
			posts.value = res.data.data
			totalPosts.value = res.data.total
		}
	} catch(err) {
		console.error('获取帖子失败', err)
		throw err
	} finally {
		isLoading.value = false
	}
}

// 编辑资料
const editProfile = () => {
	uni.navigateTo({
		url: '/pages/my/edit/edit'
	})
}

// 前往设置
const goToSettings = () => {
	uni.navigateTo({
		url: '/pages/setting/index'
	})
}

// 前往发布页面
const goToPublish = () => {
	uni.navigateTo({
		url: '/pages/post/create_post'
	})
}

// 刷新数据
const refreshData = async () => {
	if(isLoading.value) return
	
	isLoading.value = false
	
	try {
		// 重新获取本地用户信息
		getUserInfo()
		
		// 重新获取帖子列表
		await getUserPosts()
		
		// 显示成功提示
		uni.showToast({
			title: '刷新成功',
			icon: 'success',
			duration: 1500
		})
	} catch(err) {
		console.error('刷新失败', err)
		uni.showToast({
			title: err.message || '刷新失败', 
			icon: 'none',
			duration: 2000
		})
	} finally {
		isLoading.value = false
	}
}

// 跳转到帖子详情
const goToDetail = (postId) => {
	uni.navigateTo({
		url: `/pages/post/detail?id=${postId}`
	})
}

// 格式化时间
const formatTime = (timeStr) => {
	if(!timeStr) return ''
	const date = new Date(timeStr.replace(/-/g, '/'))
	return `${date.getMonth() + 1}月${date.getDate()}日 ${date.getHours()}:${date.getMinutes()}`
}

onMounted(() => {
	try {
		getUserInfo()
		getUserPosts()
	} catch(err) {
		console.error('初始化失败', err)
		uni.showToast({
			title: '加载失败',
			icon: 'none'
		})
	}
})
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background: #fff;
	height: 100vh;
	overflow: hidden;
	
	.scroll-container {
		height: 100%;
	}
}

.content-wrapper {
	min-height: 100%;
	padding: 30rpx;
	box-sizing: border-box;
	
	// 防止下拉时内容跳动
	transform: translateY(0);
	will-change: transform;
}

.user-header-wrapper {
	position: relative;
	margin-bottom: 30rpx;
	border-radius: 30rpx;
	overflow: hidden;
	
	.animated-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(
			45deg,
			#000000,
			#1a1a1a,
			#333333,
			#4d4d4d,
			#000000
		);
		background-size: 400%;
		animation: gradient 15s ease infinite;
		opacity: 1;
		
		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: linear-gradient(
				45deg,
				rgba(255, 215, 0, 0.2),  /* 金色 */
				rgba(255, 0, 128, 0.2),   /* 粉色 */
				rgba(0, 255, 255, 0.2),   /* 青色 */
				rgba(128, 0, 255, 0.2),   /* 紫色 */
				rgba(255, 215, 0, 0.2)    /* 金色 */
			);
			background-size: 400%;
			animation: gradient 10s ease infinite;
			mix-blend-mode: overlay;
		}
	}
}

.user-header {
	position: relative;
	z-index: 1;
	padding: 40rpx;
	background: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(10px);
	
	.user-info {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		
		.avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}
		
		.info-right {
			flex: 1;
			
			.username {
				font-size: 32rpx;
				color: #fff;
				font-weight: bold;
				display: block;
				margin-bottom: 8rpx;
			}
			
			.user-id {
				font-size: 24rpx;
				color: rgba(255, 255, 255, 0.8);
			}
		}
	}
	
	.action-buttons {
		display: flex;
		gap: 20rpx;
		
		.refresh-btn {
			width: 72rpx;
			height: 72rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(255, 255, 255, 0.2);
			border-radius: 50%;
			
			&.loading {
				pointer-events: none;
				
				.uni-icons {
					animation: rotate 1s linear infinite;
				}
			}
			
			&:active {
				opacity: 0.7;
			}
		}
		
		.edit-btn {
			flex: 1;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;
			background: rgba(255, 255, 255, 0.2);
			border-radius: 36rpx;
			font-size: 28rpx;
			color: #fff;
			
			&:active {
				opacity: 0.7;
			}
		}
		
		.settings-btn {
			width: 72rpx;
			height: 72rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(255, 255, 255, 0.2);
			border-radius: 50%;
			color: #fff;
			
			&:active {
				opacity: 0.7;
			}
		}
	}
}

.post-tabs {
	display: flex;
	padding: 0 30rpx;
	border-bottom: 1rpx solid #eee;
	
	.tab-item {
		flex: 1;
		display: inline-flex;
		align-items: center;
		justify-content: flex-start;
		padding: 20rpx 0;
		position: relative;
		
		text {
			font-size: 28rpx;
			color: #666;
		}
		
		.count {
			font-size: 24rpx;
			color: #999;
			margin-left: 8rpx;
		}
		
		&.active {
			text {
				color: #333;
				font-weight: bold;
			}
			
			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				width: 40rpx;
				height: 4rpx;
				background: #333;
				border-radius: 2rpx;
			}
		}
	}
}

.post-list {
	box-sizing: border-box;
	padding-bottom: calc(var(--window-bottom) + 120rpx);  // 为底部按钮和tabbar预留空间
}

.empty-tip {
	text-align: center;
	padding: 100rpx 0;
	color: #999;
	font-size: 28rpx;
}

.publish-btn {
	position: fixed;
	right: 40rpx;
	bottom: calc(120rpx + var(--window-bottom));  // 调整按钮位置，避免与tabbar重叠
	width: 100rpx;
	height: 100rpx;
	background: #ff6b6b;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4rpx 16rpx rgba(255, 107, 107, 0.3);
	z-index: 999;  /* 确保在tabbar上方 */
	
	&:active {
		transform: scale(0.95);
		opacity: 0.9;
	}
}

.my-posts {
	margin-top: 30rpx;
	
	.section-title {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 20rpx;
		
		.count {
			font-size: 24rpx;
			color: #999;
			margin-left: 10rpx;
			font-weight: normal;
		}
	}
	
	.empty-tip {
		text-align: center;
		padding: 60rpx 0;
		color: #999;
		font-size: 28rpx;
	}
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
</style>
